<template>
  <div>
    <div class="subcardbox">
      <div class="commonbox uintbox"
           v-for="(item,index) in cardlist"
           :key="index"
           :class="bglist[index]"
           @click="openStateShow(index)">
        <h3 class="remindh3 txtshadow">{{item.title}}</h3>
      </div>
    </div>
    <!--绑定床号-->
    <div class="popcontent"
         v-show="bindflag">
      <div class="unopenbox">
        <div class="stateimg"><img src="../../../static/images/indexone/state03.png"></div>
        <p class="txt">请先绑定床号</p>
      </div>
      <div class="f-mask"></div>
    </div>
    <!--绑定姓名-->
    <div class="popcontent"
         v-show="bindNameflag">
      <div class="unopenbox">
        <div class="stateimg"><img src="../../../static/images/indexone/state03.png"></div>
        <p class="txt">未绑定人员信息</p>
      </div>
      <div class="f-mask"></div>
    </div>
    <!-- 时间判定 -->
    <div class="popcontent timeshow"
         v-show="bindTime">
      <div class="unopenbox timeshow">
        <div class="stateimg"><img src="../../../static/images/indexone/state03.png"></div>
        <p class="txt">电视播放当前时间暂不开放</p>
      </div>
      <div class="f-mask"></div>
    </div>
    <!--是否已填满意度-->
    <div class="popcontent"
         v-show="bindSatifyflag">
      <div class="unopenbox">
        <div class="stateimg"><img src="../../../static/images/indexone/state03.png"></div>
        <p class="txt">问卷已填写</p>
      </div>
      <div class="f-mask"></div>
    </div>
  </div>
</template>

<script>
import Bus from '../../../bus.js'
import { android } from '../../app_.js' // 非默认导出需要加{}
import axios from 'axios'
import urls from '../../common.js'
export default {
  name: 'subcard',
  data () {
    return {
      paId: '',
      bed_no: this.$store.state.bedNo,
      bindflag: false,
      bindNameflag: false,
      bindTime: false,
      bindSatifyflag: false,
      cardlist: [
        {
          title: '电视播放'
        },
        {
          title: '娱乐'
        },
        {
          title: '患者信息'
        },
        {
          title: '费用查询'
        },
        {
          title: '历史预约'
        },
        {
          title: '疼痛管理'
        },
        {
          title: '健康宣教'
        },
        {
          title: '满意度'
        },
        {
          title: '点餐'
        },
        {
          title: '床旁缴费'
        }
      ],
      bglist: [
        'broadcast',
        'amuse',
        'patientinfo',
        'costquery',
        'message',
        'collection',
        'education',
        'satisfaction',
        'order',
        'market'
      ]
    }
  },
  methods: {
    openStateShow: function (index) {
      clearInterval(window.timer)
      if (this.$store.state.bedNo) {
        switch (index) {
          case 0:
            var hour = '' // 获取当前小时
            var minutes = '' // 获取当前分钟
            let date = this.toLocaleString()
            date.then(function (datas) {
              let data = new Date(datas.body)
              hour = this.addZero(data.getHours())
              minutes = this.addZero(data.getMinutes())
              var currentTime = hour + ':' + minutes

              if (currentTime >= '22:00' && currentTime <= '24:00' && currentTime >= '0:00' && currentTime <= '8:30') {
                this.bindTime = true
                setTimeout(function () {
                  this.bindTime = false
                }.bind(this), 1500)
              } else {
                this.tvBroad()
                window.clearInterval(this.secondtimer)
              }
            })
            break
          case 1:
            // this.Theroy()
            this.$router.push({ path: '/game' })
            window.clearInterval(this.secondtimer)
            break
          case 2:
            if (this.paName) {
              this.InforMPassword(2, 2)
            } else {
              let _this = this
              _this.bindNameflag = true
              setTimeout(function () {
                _this.bindNameflag = false
              }, 2000)
            }
            break
          case 3:
            if (this.paName) {
              this.InforMPassword(2, 3)
            } else {
              let _this = this
              _this.bindNameflag = true
              setTimeout(function () {
                _this.bindNameflag = false
              }, 2000)
            }
            break
          case 4:
            if (this.paName) {
              this.$router.push({ path: '/news' })
              window.clearInterval(this.secondtimer)
            } else {
              let _this = this
              _this.bindNameflag = true
              setTimeout(function () {
                _this.bindNameflag = false
              }, 2000)
            }
            break
          case 5:
            if (this.paName) {
              if (this.$store.state.painLevel) {
                this.$router.push('/painResult')
              } else {
                this.$router.push({ path: '/painSurvey' })
              }
              window.clearInterval(this.secondtimer)
            } else {
              let _this = this
              _this.bindNameflag = true
              setTimeout(function () {
                _this.bindNameflag = false
              }, 2000)
            }
            break
          case 6:
            if (this.paName) {
              this.$router.push({ path: '/healthInfo', query: { dpId: this.dpId } })
              window.clearInterval(this.secondtimer)
            } else {
              let _this = this
              _this.bindNameflag = true
              setTimeout(function () {
                _this.bindNameflag = false
              }, 2000)
            }
            break
          case 7:
            if (this.paName) {
              let _this = this
              this.$http.post(urls.queryIfAnswer, {
                pa_id: this.datas.pa_id,
                in_time: this.datas.in_time
              }).then(result => { // 获取菜品列表
                if (result.body.code === '200') {
                  if (result.body.data === 0) { // 未填
                    this.$router.push({ path: '/satisfaction' })
                    window.clearInterval(_this.secondtimer)
                  } else { // 已填
                    _this.bindSatifyflag = true
                    setTimeout(function () {
                      _this.bindSatifyflag = false
                    }, 2000)
                  }
                }
              })
            } else {
              let _this = this
              _this.bindNameflag = true
              setTimeout(function () {
                _this.bindNameflag = false
              }, 2000)
            }
            break
          case 8:
            if (this.paName) {
              this.$router.push({ path: '/orderOne' })
              window.clearInterval(this.secondtimer)
            } else {
              let _this = this
              _this.bindNameflag = true
              setTimeout(function () {
                _this.bindNameflag = false
              }, 2000)
            }
            break
          case 9:
            if (this.paName) {
              this.$router.push({ path: '/selfpaypassword' })
              window.clearInterval(this.secondtimer)
            } else {
              let _this = this
              _this.bindNameflag = true
              setTimeout(function () {
                _this.bindNameflag = false
              }, 2000)
            }
            break
          default:
            Bus.$emit('openShow', this.value)
        }
      } else {
        let _this = this
        _this.bindflag = true
        setTimeout(function () {
          _this.bindflag = false
        }, 2000)
      }
    },
    tvBroad () {
      axios.get(urls.tvInfoList)
        .then(this.getTVList)
    },
    getTVList (res) {
      if (res.data.code === '200') {
        let list = JSON.stringify(res.data.data)
        android.callAndroid(list)
      }
    },
    Theroy () {
      android.EmitTheory()
    },
    InforMPassword (num2, num3) {
      this.$emit('HandInforM', num2, num3)
    }
  },
  mounted () {
    window.InfoByTvName = this.InfoByTvName
  },
  props: ['secondtimer', 'paName', 'dpId', 'datas']
}
</script>

<style lang="stylus" scoped>
@import '../../assets/css/indexcommon.css';

.m-content {
  .uintbox {
    width: 3.7rem;
    height: 1.6rem;
    margin-bottom: 0.14rem;
    position: relative;
    float: left;

    &:nth-child(2n) {
      float: right;
    }

    .remindh3 {
      font-size: 0.3rem;
      color: #fff;
      position: absolute;
      top: 0.2rem;
      left: 0.2rem;
    }
  }

  .broadcast {
    background-image: url('../../../static/images/index/TV.png');
  }

  .amuse {
    background-image: url('../../../static/images/index/game.png');
  }

  .patientinfo {
    background-image: url('../../../static/images/index/PatientInfo.png');
  }

  .costquery {
    background-image: url('../../../static/images/index/CostQuery.png');
  }

  .message {
    background-image: url('../../../static/images/index/Message.png');
  }

  .collection {
    background-image: url('../../../static/images/index/pain.png');
  }

  .education {
    background-image: url('../../../static/images/index/HealthInfo.png');
  }

  .satisfaction {
    background-image: url('../../../static/images/index/Satisfaction.png');
  }

  .order {
    background-image: url('../../../static/images/index/Order.png');
  }

  .market {
    background-image: url('../../../static/images/index/pay.png');
  }
}

.popcontent, .unopenbox {
  display: inline-block;
  width: 2.22rem;
  height: 2.02rem;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.01rem 0 0 -1.11rem;
  z-index: 11;

  .stateimg {
    width: 0.78rem;
    height: 0.78rem;
    margin: 0.4rem auto 0.25rem auto;

    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .txt {
    font-size: 0.3rem;
    text-align: center;
    color: #fff;
  }
}

.timeshow {
  width: 6.22rem;
  margin-left: -3.11rem;
}

.f-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0);
}
</style>
